import React from 'react'
import { Text, StyleSheet, ScrollView, View, ImageBackground } from 'react-native'
import PropTypes from 'prop-types'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import { companyBGList, companyDefaultLogo, getSettlementMethod, getWorkNatureImgByType, unitList } from 'src/utils/ConfigUtil'
import CustomTextEllipsize from '../../../../components/custom-text-ellipsize/index'
import DefaultImage from '../../../../components/image/DefaultImage'

export default function JobRecommend(props) {
  const {
    data
  } = props

  function _onItemPress(item) {
    props.navigation.navigate('CJobdetail', {
      id: item.id
    })
  }
  return (
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
      {data && data.length > 0 ? data.map((item, index) => {
        console.log('11111', item.unit !== '' && item.unit !== undefined ? item.unit : item.settlementMethod * 1 + 1)
        return (
          <CustomButton
            style={[styles.jobRecommendItemView, { marginLeft: index === 0 ? ScaleS(20) : 0 }]}
            params={item}
            onPress={_onItemPress} key={index}>
            <RecommendItemTitle item={item} />
            <View style={styles.jobRecommendItemBottomView}>
              <View style={styles.jobRecommendTypeView}>
                <CustomTextEllipsize
                  style={styles.jobRecommendTypeLabel}
                  text={item.name} />
                {
                  item.type === 0 && (
                    <CustomImage style={styles.jobRecommendTypeImg} source={getWorkNatureImgByType(0)}></CustomImage>
                  )
                }
                {
                  item.type === 1 && (
                    <CustomImage style={styles.jobRecommendTypeImg} source={getWorkNatureImgByType(1)}></CustomImage>
                  )
                }
                {
                  item.practiceLabel === 1 && (
                    <CustomImage style={styles.jobRecommendTypeImg} source={getWorkNatureImgByType(2)}></CustomImage>
                  )
                }
              </View>
              <View style={styles.priceView}>
                <Text style={styles.priceNum}>{item.salary}</Text>
                <Text style={styles.priceUnit}>{
                  (item.type == 0 ? `元/${unitList[item.unit !== '' && item.unit !== undefined ? item.unit : item.settlementMethod * 1 + 1]}` : getSettlementMethod(item.settlementMethod).unit)
                }</Text>
              </View>

              <View style={styles.locationView}>
                {!!item.area && (
                  <View style={[styles.locationItemView, { marginRight: ScaleS(8) }]}>
                    <Text style={styles.locationItemLabel}>{item.area}</Text>
                  </View>
                )}
                {!!item.settlementMethod && (
                  <View style={styles.locationItemView}>
                    <Text style={styles.locationItemLabel}>{getSettlementMethod(item.settlementMethod).short}</Text>
                  </View>
                )}
              </View>
            </View>
          </CustomButton>
        )
      }) : null}
    </ScrollView>
  )
}

JobRecommend.propTypes = {
  onPress: PropTypes.func,
  data: PropTypes.array
}

class RecommendItemTitle extends React.PureComponent {
  // constructor (props) {
  //   super(props)
  //   this.state = {
  //     companyImg: {uri: props.item.companyLogo}
  //   }
  // }

  static propTypes = {
    item: PropTypes.object
  }

  render() {
    const { item } = this.props
    // const {companyImg} = this.state
    return (
      <ImageBackground
        style={styles.blurImg} source={companyBGList[(item.companyId || 0) % 3]}>
        <View style={styles.jobRecommendItemTopView}>
          <DefaultImage
            // onError={this._imgError}
            defaultSource={companyDefaultLogo}
            style={styles.jobRecommendItemTopImg}
            source={{ uri: item.companyLogo }} />
          {/* <Text style={styles.jobRecommendItemTopLabel}>{item.companyName}</Text> */}
          <CustomTextEllipsize
            style={styles.jobRecommendItemTopLabel}
            text={item.companyName} />
        </View>
      </ImageBackground>
    )
  }

  _imgError = () => {
    this.setState({
      companyImg: companyDefaultLogo
    })
  }
}

const styles = StyleSheet.create({
  jobRecommendItemView: {
    borderRadius: ScaleS(10),
    width: ScaleS(177),
    marginRight: ScaleS(15),
    overflow: 'hidden'
  },
  blurImg: {
    width: ScaleS(177),
    height: ScaleS(76)
  },
  jobRecommendItemTopView: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: ScaleS(12),
    height: ScaleS(76)
  },
  jobRecommendItemTopImg: {
    width: ScaleS(36),
    height: ScaleS(36),
    resizeMode: 'cover',
    borderRadius: ScaleS(18)
  },
  jobRecommendItemTopLabel: {
    flex: 1,
    color: '#ffffff',
    fontSize: ScaleT(13),
    fontWeight: '400',
    marginLeft: ScaleS(10)
  },
  jobRecommendItemBottomView: {
    paddingHorizontal: ScaleS(12),
    paddingTop: ScaleS(15),
    paddingBottom: ScaleS(23),
    backgroundColor: 'white'
  },
  jobRecommendTypeView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  jobRecommendTypeLabel: {
    flex: 1,
    width: '100%',
    color: '#000000',
    fontSize: ScaleT(16),
    fontWeight: '500'
  },
  jobRecommendTypeImg: {
    width: ScaleS(21),
    height: ScaleS(21)
  },
  priceView: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    marginTop: ScaleS(10)
  },
  priceNum: {
    color: '#FFD810',
    fontSize: ScaleT(20),
    fontWeight: 'bold'
  },
  priceUnit: {
    color: '#000000',
    fontSize: ScaleT(12),
    fontWeight: '400',
    paddingBottom: ScaleS(3)
  },
  locationView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: ScaleS(14)
  },
  locationItemView: {
    paddingHorizontal: ScaleS(16),
    paddingVertical: ScaleS(8),
    borderRadius: ScaleS(16),
    backgroundColor: 'rgba(216,216,216,0.205)'
  },
  locationItemLabel: {
    color: '#999999',
    fontSize: ScaleT(12),
    fontWeight: '400',
    opacity: 1
  }
})
